<template>
    <div class="communication">
        <div class="communiBg">
            <div class="left">
                <Left v-bind:active-entry="gc"
                      v-on:click-item="clickItem"></Left>
            </div>
            <div class="right">
                <div class="communiTop">
                    <div class="comTLeft">
                        <div>人才沟通</div>
                        <div class="comTalent"></div>
                    </div>
                    <div class="comTRight">
                        <div @click="doCommuni(index)"
                             :key="index"
                             :class="{'active':activeGroup===index,'ltext':activeGroup!==index}"
                             v-for="(item,index) in ['沟通中','不合适']">
                            {{item}}
                        </div>
                    </div>
                    <div v-if="readRest()" class="resume-title-red">试用期剩余使用时间：{{readRest()}}天</div>
                </div>
                <div class="comContBG">
                    <!--Right 左侧-->
                    <div class="left">
                        <el-scrollbar style="background:white;width:100%;height: 100%; overflow-x: hidden;">
                            <div class="userBg" :class="leftActive===index?'select':'no'" @click="dojobCont(index)"
                                 v-for="(item,index) in ps">
                                <div class="userBox">
                                    <div class="userImg"><img :src="item.headIcon" alt=""></div>
                                </div>
                                <div class="r_g">
                                    <div class="userInfo">
                                        <div>{{item.name}}</div>
                                        <div class="time">{{item.date}}</div>
                                    </div>
                                    <!--职位信息-->
                                    <el-popover placement="bottom-start"
                                                trigger="hover"
                                                :disabled="$pop.getEllipsis(item.jobName,5)===item.jobName">
                                        <div>{{item.jobName}}</div>
                                        <div slot="reference" class="job_name">职位：{{$pop.getEllipsis(item.jobName,5)}}
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-if="item.unread" class="unread_box_cls"><p class="unread_cls">{{item.unread}}</p>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                    <!--Right 右侧-->
                    <div class="comCont">
                        <!--默认展示内容-->
                        <div class="content" v-if="ps.length===0">
                            <div class="iconImg"><img :src="iconImg" alt=""></div>
                            <div>
                                <span>Tips:</span>
                                <span class="ltext">{{activeGroup===0?'您申请沟通的人才，自动归档在【沟通中】':'您申请沟通中标记为不合适的人才，自动归档在【不合适】'}}</span>
                            </div>
                        </div>
                        <!--沟通中，聊天窗口-->
                        <el-tabs v-if="ps.length>0&&leftActive>-1" type="border-card" class="company-comm-tabs"
                                 v-model="tabName">
                            <el-tab-pane label="聊天窗口" class="tabs-pane">
                                <!--聊天窗口-->
                                <ChatWindow
                                        ref="chat"
                                        :fit-q="commInfo.fitQ"
                                        :invited-q="commInfo.invitedQ"
                                        :comm-id="commInfo.commId"
                                        :to-id="commInfo.toId"
                                        :jrr-id="commInfo.jrrId"
                                        :comm-info="commInfo.communication"
                                        @comm-ops="commOps"
                                />
                            </el-tab-pane>
                            <el-tab-pane label="人才简历" class="tabs-pane">
                                <!--在线简历-->
                                <el-scrollbar style="height: 100%;">
                                    <div style="display: flex;flex-direction: column">
                                        <OnlineResume :talent="commInfo.communication.onlineTalent"></OnlineResume>
                                        <div style="width:100%;height: 78px;background: transparent;"></div>
                                    </div>
                                </el-scrollbar>
                            </el-tab-pane>
                            <el-tab-pane label="推荐报告" class="tabs-pane">
                                <!--推荐报告-->
                                <el-scrollbar style="height: 100%;">
                                    <div style="display: flex;flex-direction: column">
                                        <resume-dialog :item="commInfo.communication.reportTalent"></resume-dialog>
                                        <div style="width:100%;height: 78px;background: transparent;"></div>
                                    </div>
                                </el-scrollbar>
                            </el-tab-pane>
                            <el-tab-pane label="附件简历" class="tabs-pane">
                                <attachment style="width: 100%;height: 100%" :jrr-id="commInfo.jrrId"></attachment>
                            </el-tab-pane>
                        </el-tabs>
                        <!--操作栏-->
                        <CommOps v-if="tabName&&tabName!=='0'"
                                 :invited-q="commInfo.invitedQ"
                                 :fit-q="commInfo.fitQ"
                                 @click-which="clickOps"
                                 :name="commInfo.communication.jobName"
                                 style="position: absolute;bottom: 0"></CommOps>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import OnlineResume from './OnlineResume/OnlineResume'
  import ChatWindow from './chatWindow/chatWindow'
  import resumeDialog from '../../views/resume/resume-dilog'
  import Left from '../Left'
  import Report from './report/report'
  import _g from '../../assets/utils/global'
  import * as _ from 'underscore'
  import comm from '../../assets/utils/comm'
  import _subject from '../../assets/utils/subject'
  import CommOps from './CommOps'
  import Attachment from './attachment/attachment'

  export default {
    name: 'index-communication',
    data() {
      return {
        wsSub: null,
        tabName: '',
        iconImg: require('@/assets/img/icon_communi.png'),
        //沟通人才列表
        serverPs: [],
        ps: [],
        activeGroup: 0,
        leftActive: -1,
        gc: { g: 0, c: 0 }

      }
    },
    computed: {
      commInfo() {
        if (this.leftActive === -1) {
          comm.toIcon = null
          return {
            fitQ: false,
            invitedQ: false,
            commId: 0,
            toId: 0,
            jrrId: 0,
            communication: {
              talent: null,
              jobName: '',
              reportTalent: null,
              onlineTalent: null
            }
          }
        } else {
          const active = this.ps[this.leftActive]
          if (active.talent) {
            active.talent.workStateStr = ''
          }
          comm.toIcon = active.headIcon
          return {
            fitQ: active.fitQ,
            invitedQ: active.invitedQ,
            commId: active.commId,
            toId: active.toId,
            jrrId: active.jrrId,
            communication: {
              talent: active.talent,
              jobName: active.jobName,
              reportTalent: {
                talentId: active.talent.talentId,
                jobId: active.talent.jobId,
                userName: active.name,
                sex: active.talentSex,
                age: active.talent.talent.talentAge,
                city: active.talent.talent.workCity,
                jobName: _.map(active.talent.hopeJobList, t => {
                  return t.hopeCompanyTypeStr
                }).join(' | '),
                resumeJson: active.talent
              },
              onlineTalent: {
                resumeJson: active.talent
              }
            }
          }
        }
      }
    },
    components: {
      Attachment,
      CommOps,
      Report,
      OnlineResume,
      ChatWindow,
      Left,
      resumeDialog
    },
    methods: {
      readRest() {
        let userInfo = JSON.parse(localStorage.getItem(localSaved.userInfo))
        this.platformUser = userInfo.platformUser
        return userInfo.company.probationPeriodTime
      },
      commOps(commId, ops) {
        console.log('receive ops', commId, ops)
        let exist = _.find(this.ps, t => {
          return t.commId === commId
        })
        if (exist) {
          if (ops === 'fit') {
            exist.fitQ = true
          } else {
            exist.invitedQ = true
          }
        }
      },
      clearUnread(commId) {
        const str = {
          'comid': String(commId),
          'type': 'CLEAR',
          'mainCom': 'company',
          'mainUserId': String(_subject.getCompanyId())
        }
        console.log('clear read', str)
        _subject.ws.next(str)
      },
      classify() {
        this.ps = _.map(
          //筛选合适和不合适
          _.filter(
            this.serverPs,
            t => {
              if (this.activeGroup === 1) {
                return t.relationshipState === 4
              } else {
                return t.relationshipState !== 4
              }
            }),
          t => {
            let talent = JSON.parse(t.json)
            if (talent) {
              talent.jobId = t.jobId
            }
            return {
              name: t.name,
              last: new Date(t.lastComtime),
              date: new Date(Date.parse(t.lastComtime)).format('MM月dd日'),
              headIcon: t.head ? t.head : null,
              commId: t.id,//沟通id
              toId: t.toId,
              jrrId: t.relationshipId,
              unread: t.unreadType === 'company' ? t.unread : 0,
              talent: talent,
              talentSex: t.sex,
              jobName: t.jobName,
              invitedQ: !(Number(t.appropriate) === 0),
              fitQ: t.relationshipState === 4
            }
          })
        //排序
        this.ps = _.sortBy(this.ps, t => {
          return t.last
        })
        this.ps.reverse()
        console.log('load person list local', this.ps)
      },
      clickOps(ops) {
        if (ops === 'invite') {
          this.$refs.chat.doInduction()
          this.tabName = '0'
        } else if (ops === 'notFit') {
          this.$refs.chat.diFit()
          this.tabName = '0'
        } else if (ops === 'communicate') {
          this.tabName = '0'
        }
      },
      newMessage(id, unread) {
        const exist = _.find(this.ps, o => {
          return o.commId === id
        })
        console.log('new message', exist, id, unread)
        if (exist) {
          exist.unread = unread
          exist.last = Date.now()
          if (unread) {
            const active = this.ps[this.leftActive].commId
            // 所有的按时间倒序
            this.ps = _.sortBy(this.ps, t => {
              return t.last
            })
            this.ps.reverse()
            //重新激活
            this.leftActive = _.findIndex(this.ps, t => {
              return t.commId === active
            })
          }
        }
      },
      loadPersonList() {
        _g.apiPost('/company/selectComPersonNums.do', {})
          .then(res => {
            console.log('load person list server', res)
            if (res && res.status === 0) {
              this.serverPs = res.data
              this.classify()
            }
          })
      },
      doCommuni(obj) {
        this.activeGroup = obj
        this.tabName = '0'
        this.leftActive = -1
        this.loadPersonList()
      },
      clickItem: function(g, c) {
        this.gc = { g: g, c: c }
        _g.getCache().gc = this.gc
        if (g == 0 && c == 0) {
          this.$router.push({ path: '/resume' })
        } else if (g == 0 && c == 1) {
          this.$router.push({ path: '/resume' })
        } else if (g == 1 && c == 1) {
          this.$router.push({ path: '/communication/Corporate' })
        } else if (g == 2 && c == 0) {
          this.$router.push({ path: '/resume' })
        } else if (g == 2 && c == 1) {
          this.$router.push({ path: '/resume' })
        } else if (g == 2 && c == 2) {
          this.$router.push({ path: '/resume' })
        }
      },
      dojobCont(index) {
        //清除未读消息标记
        this.clearUnread(this.ps[index].commId)
        //赋值
        this.leftActive = index
      }
    },
    created() {
      this.loadPersonList()
      let self = this
      this.wsSub = _subject.ws.subscribe({
        next(t) {
          console.log('ws new message', t)
          if (t.status === 200) {
            let m = t.data.type
            if (m === 'SINGLE_SENDING') {
              let commId = t.data.comid
              let mainId = t.data.mainUserId
              let toId = t.data.toUserId//对方发送的消息
              //通知收到父组件消息
              self.newMessage(Number(commId), Number(t.data.unread))
            }
          }
        }
      })
    },
    destroyed() {
      if (this.wsSub) {
        this.wsSub.unsubscribe()
      }
    },
    mounted() {
      this.gc = _g.getCache().gc
    }
  }
</script>

<style lang="scss" scoped>

    .unread_box_cls {
        width: 18px;
        height: 18px;
        background: rgba(241, 92, 24, 1);
        border-radius: 50%;
        position: absolute;
        left: 35px;
        top: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .unread_cls {
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0;
    }

    .el-scrollbar > .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .select {
        background: #FFFBF7;
        /*background: red;*/
    }

    .no {
        background: #FFFFFF;
    }

    .communication {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        /*padding-bottom: 250px;*/
        /*border: 1px solid red;*/
    }

    .communiBg {
        width: 1200px;
        margin: 0 auto;
        padding-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .communiBg .left {
        /*width: 70px;*/
    }

    .right {
        width: 100%;
        height: calc(100vh - 125px);
        display: flex;
        flex-direction: column;
        margin-left: 19px;
        /*border: 1px solid red;*/
    }

    .communiTop {
        width: 980px;
        height: 50px;
        background-color: white;
        border-bottom: 1px solid #F7F7F7;
        display: flex;
        flex-direction: row;

        position: relative;
        /*border:1px solid red;*/
        .resume-title-red {
            margin: 0 48px 0 0;
            font-size: 14px;
            font-weight: 400;
            color: #dd3a31;
            display: flex;
            align-items: center;
            position: absolute;
            height: 100%;
            right: 0;
        }
    }

    .comTLeft {
        line-height: 40px;
        margin-left: 50px;
        font-size: 20px;
    }

    .comTLeft > div:nth-child(1) {
        line-height: 50px;
    }

    .comTLeft > div:nth-child(2) {
        margin-top: -6px;
        margin-left: 14px;
    }

    .comTalent {
        width: 50px;
        height: 3px;
        background-color: #FF7300;
        text-align: center;
    }

    .comTRight {
        display: flex;
        flex-direction: row;
        margin-left: 50px;
        /*position: absolute;*/
        /*right: 50px;*/
        cursor: default;
        /*border:1px red solid;*/
    }

    .comTRight > div {
        width: 96px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        background-color: #F7F7F7;
        border-radius: 5px;
        margin-top: 10px;
    }

    .comTRight > div:nth-child(1) {
        margin-right: 30px;
    }

    .userBg {
        width: 180px;
        height: 80px;
        display: flex;
        flex-direction: row;
        cursor: default;
        align-items: center;
        position: relative;

        .userBox {
            margin-left: 10px;

            .userImg {
                width: 40px;
                height: 40px;
                border: 1px solid #F7F7F7;
                border-radius: 50%;

                img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .r_g {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            padding: 20px 10px 20px 10px;
            width: 100%;
            height: 100%;

            .userInfo {
                font-size: 14px;
                line-height: 20px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;

                & > div:nth-child(1) {
                    font-weight: bold;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow-x: hidden;
                }

                .time {
                    font-size: 12px;
                    flex-shrink: 0
                }
            }

            .job_name {
                font-size: 12px;
            }
        }
    }


    .comContBG {
        height: calc(100% - 50px);
        position: relative;
        display: flex;
        flex-direction: row;
        /*border:1px solid red;*/
    }

    .comContBG .left {
        height: 100%;
        width: 180px;
        /*border-right: 2px solid #f7f7f7;*/
        /*overflow: auto;*/
    }

    .comContBG .comCont {
        width: 798px;
        height: 100%;
        border-left: 1px solid #F7F7F7;
        /*border: 2px solid red;*/
        background-color: white;
        position: absolute;
        top: 0;
        left: 180px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .curso {
        cursor: default;
    }

    .iconImg {
        width: 60px;
        height: 60px;
        margin: 29px auto;

        img {
            width: 100%;
        }
    }

    .content {
        /*transform: translate(-50%, -50%);*/
        width: 100%;
        height: 100%;
    }

    .ltext {
        color: #666;
    }

    .active {
        color: #F09338;
    }

    .company-comm-tabs {
        width: 100%;
        height: 100%;
        /*border: 2px solid red;*/
        box-shadow: none;
        position: relative;
    }

    .tabs-pane {
        width: 100%;
        height: 100%;
        color: #333;
        /*border-radius: 15px;*/
        /*border: 2px solid yellow;*/
    }

    .chat {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        position: relative;
    }

    .chatBox {
        width: 254px;
        height: 20px;
        /*border: 1px solid #F7F7F7;*/
        display: flex;
        flex-direction: row;
        font-size: 14px;
    }

    .chatBox > div {
        font-size: 14px;
        border-left: 1px solid #666;
        padding-right: 10px;
        padding-left: 10px;
    }

    .chatBox > div:nth-child(1) {
        padding-left: 0;
        border-left: none;
    }

    .userName {
        font-size: 18px;
    }

    .font {
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .font > div {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
    }

    .font > div:nth-child(1) {
        margin-left: 0px;
        margin-top: 0px;
    }

    .chatBG {
        margin-left: 50px;
    }

    .chatR {
        position: absolute;
        right: 50px;
        top: 34px;
    }

    .fontColor {
        color: #4AB0CF;
    }

    .font9 {
        color: #999;
    }

    .fonSize {
        font-size: 14px;
    }

    .fonP {
        width: 118px;
        height: 11px;
        /*background-color: #4ab0cf;*/
        position: absolute;
        top: 158px;
        left: 43%;
    }

    .empty {
        width: 300px;
        height: 2px;
        background-color: #F7F7F7;
    }

    .fR {
        /*position: absolute;*/
    }

    .rightB {
        width: 798px;
        height: 182px;
        border-top: 2px solid #f7f7f7;
        position: absolute;
        bottom: 0;
    }

    .Rb {
        margin-right: 49px;
        margin-top: 10px;
    }

    .Rb > div:nth-child(1) {
        margin-right: 30px;
    }

    .fontG {
        color: #009944;
    }

    .fontR {
        color: #dd3a31;
    }

    .btn {
        width: 96px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #f7f7f7;
        border-radius: 18px;
        position: absolute;
        right: 50px;
        bottom: 22px;
        cursor: default;
    }

    .text1 {
        color: #333;
        margin-top: 53px;
        margin-left: 50px;
        text-align: left;
    }

    .icon_margin {
        margin-right: 5px;
        margin-top: 2px;
    }

    .icon_green {
        width: 16px;
        height: 16px;
        background: url("../../assets/img/communication/invitation_green.jpg") no-repeat;
    }

    .icon_gray {
        width: 16px;
        height: 16px;
        background: url("../../assets/img/communication/invitation_gray.png") no-repeat;
    }

    .icon_fit_black {
        width: 16px;
        height: 16px;
        background: url("../../assets/img/communication/fit_black.jpg") no-repeat;
    }

    .icon_fit_red {
        width: 16px;
        height: 16px;
        background: url("../../assets/img/communication/fit_red.png") no-repeat;
    }

    .msg {
        width: 228px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        background-color: #f7f7f7;
        border-radius: 17px;
        font-size: 14px;
        color: #333;
        margin-top: 137px;
        margin-left: 36%;
    }

    .fT {
        margin-top: 30px;
        margin-left: 2%;
        /*position: absolute;*/
        /*top:285px;*/
        /*left: 46%;*/
    }

    .toux {
        width: 24px;
        height: 24px;
        border: 1px solid #F7F7F7;
        border-radius: 25px;
        overflow: hidden;
        position: absolute;
        right: 50px;
        top: 222px;

        img {
            width: 100%;
        }
    }

    .textDiv {
        width: 294px;
        height: 53px;
        background-color: #F7F7F7;
        border-radius: 10px;
        line-height: 53px;
        text-align: center;
        color: #333;
        position: absolute;
        right: 84px;
        top: 222px;
    }

    .ops_cls {
        width: 100%;
        height: 78px;
        position: absolute;
        bottom: 0;
    }

</style>
